<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
   /* 参考实例： http://www.ruanyifeng.com/blog/2015/07/flex-examples.html
   */
    *{margin: 0;padding: 0}
    /*
    * 设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。
    */
    .box {
        width: 500px;
        height: 500px;
        border: 1px solid red;
        border-radius: 5px;
        /* 块级元素使用flex*/
        display: flex;
        /*webkit内核浏览器需要加上前缀*/
        display: -webkit-flex;
        /*display: inline-flex;(行内元素使用flex)*/
        /*（方向）
            设置在容器上：
            row  水平方向，起点左端。→
            row-reverse 水平方向，起点右端。←
            column 垂直方向，起点上沿。↓
            column-reverse 垂直方向，起点下沿。↑
          */
        flex-direction: row;
        /*
        （方式）
          nowrap(默认不换行)
          wrap （换行，第一行在上方。（循序））
          wrap-reverse;（换行，第一行在下方。（倒序））
        */
        flex-wrap:wrap;
        /*
        flex-flow: <flex-direction> || <flex-wrap>;()
        flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
        */
        flex-flow:row wrap;
        /*
            对齐方式：（水平方向的，垂直方向居中）
            flex-start（左对齐）
            flex-end （右对齐）
            center（居中对齐）
            space-between（两端对齐，项目之间的间隔都相等。）
            space-around（每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。）
            注意：（垂直方向，水平方居中）
            align-content: flex-start | flex-end | center | space-between | space-around | stretch;
        */
        justify-content:center;
        /*
           在交叉轴上如何对齐。
           flex-start(交叉轴的起点对齐,上对齐)
           flex-end(交叉轴的终点对齐。下对齐)
           center(交叉轴的中点对齐。中间对齐)
           baseline（项目的第一行文字的基线对齐）
           stretch（默认值：如果项目未设置高度或设为auto，将占满整个容器的高度。）
        */
        align-items:flex-end;
    }
    .box-item{width: 100px;height: 100px;background:darkslategray;margin: 10px;
        /*
            排列循序：
            order:num(默认为0)数值越小，排列越靠前
        */
        order:3;
        /*
            放大比例：
            flex-grow：num（默认为0）即如果存在剩余空间，也不放大。
        */
        flex-grow:0;
        /*
            缩小比例：flex-shrink：num（默认为1）如果空间不足，该项目将缩小。
            如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
            如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
        */
        flex-shrink:1;
        /*
            它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
        */
        flex-basis:auto;
        /*
            flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto
        */
        flex:auto;
        /*
            允许单个项目有与其他项目不一样的对齐方式，
            auto | flex-start | flex-end | center | baseline | stretch;
        */
        align-self:auto;
    }
    /*内容和菜单栏都是动态的 */
    .box1{
        width: 100px;
        height: 100px;
        display: flex;
        flex-flow:row wrap;
        border:1px solid #000;
    }
    .box1 .menu{
        background: red;
        height: 100%;
        width: 10px;/*固定宽度*/
    }
    .box1 .contain{
        background: blueviolet;
        height: 100%;
        flex:1;/*这里设置为占比1，填充满剩余空间*/
    }
    /*圣杯布局*/
    .HolyGrail {
        display: flex;
        min-height: 300px;
        flex-direction: column;
        width: 500px;
    }

    header,
    footer {
        flex: 1;
        border: 1px solid red;
    }

    .HolyGrail-body {
        display: flex;
        flex: 1;

    }

    .HolyGrail-content {
        flex: 1;
    }

    .HolyGrail-nav, .HolyGrail-ads {
        /* 两个边栏的宽度设为12em */
        flex: 0 0 12em;
        border: 1px solid red;
    }

    .HolyGrail-nav {
        /* 导航放到最左边 */
        order: -1;
    }
    /*输入框布局*/
    .InputAddOn {
        width: 500px;
        display: flex;
    }

    .InputAddOn-field {
        flex: 1;
    }
    /* 悬挂式布局*/
    .Media {
        display: flex;
        align-items: flex-start;
        width: 500px;
    }

    .Media-figure {
        margin-right: 1em;
    }

    .Media-body {
        flex: 1;
    }
/*固定的底栏*/
    .Site {
        display: flex;
        min-height: 100px;
        width: 400px;
        flex-direction: column;
    }

    .Site-content {
        flex: 1;
    }

</style>
<body>
    <div class="box">
        <div class="box-item" style="flex-basis:200px">我是item1</div>
        <div class="box-item">我是item2</div>
        <div class="box-item">我是item3</div>
        <div class="box-item">我是item4</div>
        <div class="box-item" style="align-self: center;">我是item5</div>
        <div class="box-item">我是item6</div>
        <div class="box-item">我是item7</div>
        <div class="box-item">我是item8</div>
        <div class="box-item">我是item9</div>
        <div class="box-item" style="height: 150px;flex-grow:1">我是item10</div>
        <div class="box-item" style="order: 2">我是item11</div>
    </div>
    <!--（左侧固定宽度，右侧自适应宽度）-->
    <!--Menu 固定 content 动态填充容器剩余部分-->
    <div class="box1">
        <div class="menu"></div>
        <div class="contain"></div>
    </div>
    <!--圣杯布局-->
    <div class="HolyGrail">
    <header>头部</header>
    <div class="HolyGrail-body">
        <main class="HolyGrail-content">中间部分</main>
        <nav class="HolyGrail-nav">中间左侧</nav>
        <aside class="HolyGrail-ads">中间右侧</aside>
    </div>
    <footer>尾部</footer>
    </div>
    <!--输入框的布局-->
    <div class="InputAddOn">
        <span class="InputAddOn-item">搜查：</span>
        <input class="InputAddOn-field">
        <button class="InputAddOn-item">开始吧</button>
    </div>
    <!--悬挂式布局-->
    <div class="Media">
        <img class="Media-figure" src="pic.png" alt="" width="50" height="50">
        <p class="Media-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquid blanditiis consectetur consequatur deserunt dicta eaque fuga fugiat ipsa, nemo nulla reiciendis sed voluptatibus. Dolorem facilis itaque labore neque perspiciatis?</p>
    </div>
    <!-- 固定的底栏-->

    <div class="Site">
    <header>我是头部</header>
    <main class="Site-content">我是中间部分</main>
    <footer>我是固定的尾部</footer>
    </div>
</body>
</html>